<template>
  <div id="app">
    <h2>=============== {{ message }} ===============</h2>

    <div>
      <h3>vuex</h3>
      <p>{{ $store.state.counter }}</p>
    </div>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
    <hr />

    <hello-vuex :count="count"></hello-vuex>
  </div>
</template>

<script>
// 导入组件
import HelloVuex from "./components/HelloVuex";

export default {
  name: "App",

  components: {
    HelloVuex,
  },

  data() {
    return {
      count: 0,
      message: "我是APP组件",
    };
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>
